<template>
    <div class="body">
        <!--<el-breadcrumb id="arrow" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>查询</el-breadcrumb-item>
        </el-breadcrumb>-->
        <!--头部信息-->
        <div class="d_head_to">
            <i style="color:orangered" class="el-icon-search"></i>
            全国培训机构查询系统
        </div>
        <!--输入框-->
        <div style="width: 1200px;margin: 20px auto">
            <div class="d_input">
                <el-col :span="4">
                    <el-select  @change="changePage()" style="width: 100px"  v-model="select" placeholder="请选择">
                        <el-option label="安徽" :value="1"></el-option>
                        <el-option label="上海" :value="2"></el-option>
                        <el-option label="南京" :value="3"></el-option>
                        <el-option label="北京" :value="4"></el-option>
                        <el-option label="广东" :value="5"></el-option>
                        <el-option label="深圳" :value="6"></el-option>
                        <el-option label="其他" :value="7"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-input style="width: 660px"
                            placeholder="请输入培训公司名称"
                            prefix-icon="el-icon-search"
                              v-model="name">
                    </el-input>
                </el-col>
            </div>
            <!--注释-->
            <div style="display: inline-block;margin-left: 19.5%;font-size: 12px;color: #3a8ee6">编号</div> <div style="display: inline-block;margin-left: 38%;font-size: 12px;color: #666666">名称</div>
            <!--内容显示-->
            <div class="comment">
                <div v-for="v in result" class="info_c">
                    <span class="s_1">{{v.id}}</span>
                    <span class="s_2">{{v.name}}</span>
                </div>
                <div v-if="result.length<1" style=" width:300px;margin-left: 42%;color: #3a8ee6">
                    此公司暂没有找到
                </div>
            </div>
            <!--分页-->
            <div v-if="result.length>1" style="width: 460px;margin: 50px auto;">
                <el-pagination
                        background
                        @current-change="changePage()"
                        :current-page.sync="page"
                        :page-size="10"
                        layout="total, prev, pager, next"
                        :total="count">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "train",
        data(){
            return{
                select:1,
                result:[],
                name:'',
                page:1,
                count:0,
            }
        },
        watch:{
            name:function (newV,oldV) {
                //初始化数据
                let url='https://www.dragonjun.com/boot/query/get_train';
                let data=JSON.stringify({"key_word":newV,"type":this.select,"page":this.page,"pagenum":10});
                axios.post(url,data,{
                    headers:{
                        'Content-Type': 'application/json',
                    }
                }).then((data)=>{
                    //console.log(data);
                    this.result=data.data.data.rows;
                    this.count=data.data.data.count;
                    console.log(this.result)
                    /*this.news=data.data.data.result.list;
                    this.loading=false;*/
                }).catch((error)=>{
                    console.log(error);
                })

            }
        },
        created(){
            //初始化数据
            let url='https://www.dragonjun.com/boot/query/get_train';
            let data=JSON.stringify({"key_word":this.name,"type":this.select,"page":this.page,"pagenum":10});
            axios.post(url,data,{
                headers:{
                    'Content-Type': 'application/json',
                }
            }).then((data)=>{
                //console.log(data);
                this.result=data.data.data.rows;
                this.count=data.data.data.count;
                console.log(this.result)
                /*this.news=data.data.data.result.list;
                this.loading=false;*/
            }).catch((error)=>{
                console.log(error);
            })

        },
        computed:{

        },
        methods:{
            changePage(){
                //初始化数据
                let url='https://www.dragonjun.com/boot/query/get_train';
                let data=JSON.stringify({"key_word":this.name,"type":this.select,"page":this.page,"pagenum":10});
                axios.post(url,data,{
                    headers:{
                        'Content-Type': 'application/json',
                    }
                }).then((data)=>{
                    //console.log(data);
                    this.result=data.data.data.rows;
                    this.count=data.data.data.count;
                    //console.log(this.result)
                    /*this.news=data.data.data.result.list;
                    this.loading=false;*/
                }).catch((error)=>{
                    console.log(error);
                })

            }

        }
    }
</script>

<style scoped>

    .body{
       // border: 1px solid yellowgreen;
        height: auto;
        width: 1300px;
        margin: 5% auto;
        //box-shadow: 0 0 5px #666666;
        //padding-bottom: 50px;
       // background: cyan;
    }
    .d_head_to{
        width: 300px;
        height: auto;
        margin: 0 auto;
        font-size: 25px;
        margin-top: 50px;
    }
    .d_input{
        width: 800px;
        height: auto;
        margin: 10px auto;
        //border: 1px solid red;
        overflow: hidden;
    }
    .comment{
        width: 800px;
        height:auto;
        //border: 1px solid red;
        margin: 10px auto;
        border-bottom: 1px solid #E6EBF5;
        border-top: 1px solid #E6EBF5;
        padding-bottom: 10px;
    }
    .info_c{
        margin-top: 20px;
    }
    .info_c .s_1{
        margin-left: 20px;
        color: #3a8ee6;
        display: inline-block;
        //border: 1px solid red;
        width: 50px;
        text-align: center;
    }
    .info_c .s_2{
        margin-left: 35%;
        color: #666666;
        display: inline-block;
        //border: 1px solid red;
        width: 370px;
        text-align: center;
    }

</style>